<template>
  <div class="list_index" style="display: flex">
    <div class="backBox">
      <el-button type="text" icon="el-icon-s-home" @click="back">返回主页</el-button>
    </div>
    <div class="list_litter" v-for="(item, index) in listLitter" :key="index">
      <img :src="item" alt="">
    </div>
    <div class="swiper-container box" >
      <div class="swiper-wrapper" >
        <div  class="swiper-slide pngBox" v-for="(item, index) in pngList" :key="index">
          <img :src="item" alt="" srcset="" style="width: 260px"  @click="toDetail(index)">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="bom">
      <ul class="lit">
        <li>服务器设备7台 |</li> 
        <li>网络设备5台 |</li> 
        <li>网络安全设备10台 |</li> 
        <li>软件系统13个 |</li> 
        <li>接收外单位设备4台</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper/bundle'
  import 'swiper/swiper.min.css'
  import severIcon from '@/static/images/listPage/severIcon.png' 
  import netIcon from '@/static/images/listPage/netIcon.png' 
  import secureIcon from '@/static/images/listPage/secureIcon.png' 
  import softwareIcon from '@/static/images/listPage/softwareIcon.png' 
  import receiverIcon from '@/static/images/listPage/receiverIcon.png' 
  import listTop from '@/static/images/listPage/listTop.png'
  export default {
    name: 'ListIndex',
    data() {
      return {
        pngList: [],
        listLitter: []
      }
    },
    mounted() {
      this.pngList.push(severIcon, netIcon, secureIcon, softwareIcon, receiverIcon),
      this.listLitter.push(listTop)
      var swiper = new Swiper('.swiper-container', {
        initialSide: 1,//默认索引为二的图片
        // direction: 'vertical',//滑动方向：vertical垂直， 默认水平
        // speed: 300,//滑动速度
        // autoplay: true,//自动切换, 默认停留3秒
        autoplay: {
          // 停留时间
          delay: 2000
        },
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,//循环模式
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      })
    },
    methods: {
      back() {
        // 这个是返回上一个路由
        // this.$router.go(-1)
        // 下面的是跳到指定页面  你这个方法是跳回主页而不是返回上一页  语义化一点  就是直接指定跳到首页
        // this.$router.push('/')【简写】 === this.$router.push({ path: '/' })【推荐、不简写】
        this.$router.push({
          path: '/'
        })
      },
      toDetail(index) {
        // console.log(index);
        // 0服务器 1网络 2网络安全 3软件 4接收设备
        if(index === 0) {
          this.$router.push('/severClass')
        } else if(index === 1){
          this.$router.push('/netClass')
        } else if(index === 2) {
          this.$router.push('/securityClass')
        } else if(index === 3) {
          this.$router.push('/softwareClass')
        } else {
          this.$router.push('/receiveClass')
        }

      }
    }
  }
</script>

<style lang="less" scoped>
  .list_index {
    position: relative;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // height: 100vh;
    background: url(@/static/images/listPage/listBg.png) no-repeat;
    background-size: 100% 100%;
    justify-content: center;
    align-items: center;
  }
  .backBox {
    position: absolute;
    top: 40px;
    right: 20px;
    .el-button {
    font-size: 18px;
  }
  }
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      // Swiper定义一个大小
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
         .swiper-slide img{
          // height: 150px;
          // width: 80px;
          height: 48%;
          width: 30%;
         }
      /* Center slide text vertically垂直居中幻灯片文本 */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	    transition: 300ms;
	    transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
  .box {
    margin-top: 100px;
    width: 70%;
    overflow: hidden;
  }
  // 副标题
  .list_litter img{
    position: absolute;
    top: 17%;
    left: 29%;
    height: 10%;
    width: 40%;
  }
  .bom {
    position: absolute;
    // top: 83%;
    // top:28%;
    // bottom:5%;
    top: 14%;
    right: 38%;
    .lit {
      li {
        display: inline-block;
        color: #47d5fb;
        font-size: 10px;
        margin-right: 5px;
      }
    }
  }
  
</style>